<template>
  <div :class="className">
    <!-- style -->
    <div v-html="css"></div>
    <!--律师平台-->
    <div class="lawyer">
      <div class="d-f ">
        <div class="d-f y-l">
          <img src="../../../resource/images/image.png" alt="">
        </div>
        <div class="d-f y-r">
          <div class="d-f f-j-c">
            <div class="s-16 name_color" style="">律师姓名</div>
            <div class="btn s-10">立即咨询</div>
          </div>
          <div class="d-f">
            <div class="job_color tag_1">职称</div>
            <div class="year_color tag_1">执业x年</div>            
          </div>
          <div class="d-f" style="line-height: 12px;">
            <div class="tag s-10">领域名称</div><div style="padding: 0 3px;">|</div><div class="tag s-10">领域名称</div>
          </div>
          <div class="d-f f-j-c">
            <div><span class="city_color">城市</span><em style="padding:0 4px;">|</em><span class="office_color">所属律师事务所名称</span></div>
            <div class="distance_color">距离</div>
          </div>
        </div>
      </div>
    </div>
    <div>
    </div>
  </div>
</template>

<script>
	import emptyImage from '@/resource/images/image.png';
	// 自定义样式
	const css = function () {

		if(this.datas.template_bg) {
			// 确保数据已传入
			const {
        template_bg,
        name_color,
				job_color,
        job_bg,
        job_radius,
				year_color,
        year_bg,
        year_radius,
				distance_color,
				city_color,
				office_color,
				field_color,
        consultation_color,
				consultation_bg,
				consultation_border_color,
				consultation_radius
			} = this.datas;

			return `
        .component-${this.id} .lawyer {
            background-color: ${template_bg};
        }

        .component-${this.id} .lawyer .name_color {
            color: ${name_color};
        }
        .component-${this.id} .lawyer .job_color {
            color: ${job_color};
            background-color: ${job_bg};
            border-radius: ${job_radius }px;
        }
        .component-${this.id} .lawyer .year_color {
            color: ${year_color};
            background-color: ${year_bg};
            border-radius: ${year_radius }px;
        }
        .component-${this.id} .lawyer .distance_color {
            color: ${distance_color};
        }
        .component-${this.id} .lawyer .city_color {
            color: ${city_color};
        }
        .component-${this.id} .lawyer .office_color {
            color: ${office_color};
        }
        .component-${this.id} .lawyer .tag {
            color: ${field_color};
        }
        .component-${this.id} .lawyer .btn {
            color: ${consultation_color};
            background-color: ${consultation_bg};
            border-radius: ${consultation_radius }px;
            border-color: ${consultation_border_color};
        }
    `;
    }

	};

	export default {
		data() {
			return {
				emptyImage
			};
		},
		props: ["id", "datas", "styles"],
		computed: {
			css() {
				return "<style>" + css.call(this) + "</style>";
			},
			className() {
				const name = ["component-wrapper", `component-${this.id}`];
				return name;
			},
		},

		methods: {},

		mounted() {
			this.$emit("loaded");
      console.log(this.datas.list)
		},
	};
</script>

<style lang="less" scoped>
  // 默认
  .component-wrapper {
    width: 375px;
  }
  .lawyer{
    margin: 12px;
    box-shadow: 1px 2px 4px rgba(61,61,61,0.25);
    border-radius: 10px;
    padding: 10px;
    font-size: 14px;
    .d-f{
      display: flex;
      align-items: center;
    }
    .f-j-c{
      justify-content: space-between;
    }
    .y-l{
      margin-right: 12px;
      img{
        width: 87px;
        height: 87px;
        border-radius: 4px;
        overflow: hidden;
      }
    }
    .y-r{
      flex: 1;
      flex-direction: column;
      .d-f{
        width: 100%;
        margin-bottom: 4px;
      }
    }
    .s-16{
      font-size: 16px;
    }
    .s-10{
      font-size: 10px;
    }
    .tag{
      line-height: 16px;
    }
    .tag_1{
      padding: 0 5px;
      line-height: 18px;
      margin-right: 5px;
      font-size: 12px;
    }
    .btn{
      width: 63px;
      height: 20px;
      padding: 0;
      line-height: 20px;
      text-align: center;
      border: 1px solid #1B1B1D;
      border-radius: 10px;
    }
  }

</style>
